---
description: GraphQL Code Generator's `@graphql-codegen/typescript-resolvers` plugin generates TypeScript types for your GraphQL API's resolvers.
---
import { Tabs, Callout } from '@theguild/components'

# Guide: GraphQL Yoga / Apollo Server

GraphQL Code Generator's `@graphql-codegen/typescript-resolvers` plugin generates TypeScript types for your GraphQL API's resolvers.

<Callout type="info">
  The GraphQL Codegen server preset configures `@graphql-codegen/typescript-resolvers` and comes with features to streamline the developer experience such as better server integration, type-safety, generated resolvers, and more!

  Read how to [set up GraphQL Server with server preset](/docs/guides/graphql-server-apollo-yoga-with-server-preset)
</Callout>

## Video tutorial

[Episode #26 of `graphql.wtf`](https://graphql.wtf/episodes/26-type-safe-resolvers-with-graphql-code-generator) is a great introduction to `@graphql-codegen/typescript-resolvers`:

<iframe src="https://youtube.com/embed/tHMaNmqPIC4" />

<Callout>
  [More weekly episodes are available in `graphql.wtf`](https://graphql.wtf) by [Jamie
  Barton](https://twitter.com/notrab).
</Callout>

## Guide

Most GraphQL API resolvers remain untyped or wrongly typed, which leads to multiple issues:

- resolvers not compliant with the Schema definition

- unhandled scenarios

- typos in the resolvers' function type signature

For this reason, GraphQL Code Generator provides `@graphql-codegen/typescript-resolvers` that help automate the generation of resolvers' typings.

Just a few configuration steps are required to get the resolvers types generated:

**1. Move your GraphQL Schema declaration in dedicated `.graphql` files**

```graphql filename="schema.graphql"
type Author {
  id: Int!
  firstName: String!
  lastName: String!
  posts(findTitle: String): [Post]
}

type Post {
  id: Int!
  title: String!
  author: Author
}

type Query {
  posts: [Post]
}
```

**2. Install the `@graphql-codegen/typescript-resolvers` plugin**

```sh npm2yarn
npm i -D @graphql-codegen/cli @graphql-codegen/typescript-resolvers @graphql-codegen/typescript
```

**3. Configure the plugin**

Create or update your `codegen.ts` file as follows:

<Tabs items={['Apollo Server', 'GraphQL Yoga']}>
<Tabs.Tab>
```ts filename="codegen.ts"
import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: 'schema.graphql',
  generates: {
    './resolvers-types.ts': {
      config: {
        useIndexSignature: true,
      },
      plugins: ['typescript', 'typescript-resolvers'],
    },
  },
};
export default config;
```
</Tabs.Tab>

<Tabs.Tab>
```ts filename="codegen.ts"
import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: 'schema.graphql',
  generates: {
    './resolvers-types.ts': {
      plugins: ['typescript', 'typescript-resolvers'],
    },
  },
};
export default config;
```
</Tabs.Tab>
</Tabs>

**4. Run the codegen and update your code**

Assuming that, as recommended, your `package.json` has the following script:

```json filename="package.json"
{
  "scripts": {
    "generate": "graphql-codegen"
  }
}
```

Running the following generates the `graphql/generated.tsx` file.

```sh npm2yarn
npm run generate
```

We can now write/migrate our GraphQL API implementation as follows:

<Tabs items={['Apollo Server', 'GraphQL Yoga']}>
<Tabs.Tab>
```ts
import { readFileSync } from 'node:fs'
import { ApolloServer } from 'apollo-server'
import { Resolvers } from './resolvers-types'

const typeDefs = readFileSync('./schema.graphql', 'utf8')

const resolvers: Resolvers = {
  Query: {
    // typed resolvers
  }
}

const server = new ApolloServer({ typeDefs, resolvers })

// The `listen` method launches a web server
server.listen().then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`)
})
```
</Tabs.Tab>

<Tabs.Tab>
```ts
import { readFileSync } from 'node:fs'
import { createYoga, createSchema } from 'graphql-yoga';
import { createServer } from 'http';
import { Resolvers } from './resolvers-types'

const typeDefs = readFileSync('./schema.graphql', 'utf8')

const resolvers: Resolvers = {
  Query: {
    // typed resolvers
  }
}

const schema = createSchema({ typeDefs, resolvers })
const yoga = createYoga({ schema })
const server = createServer(yoga)

server.listen(3000)
```
</Tabs.Tab>
</Tabs>

A complete tutorial, written by The Guild's CTO, Dotan Simha, is available on our blog: [Better Type Safety for your GraphQL resolvers with GraphQL Codegen](https://the-guild.dev/blog/better-type-safety-for-resolvers-with-graphql-codegen).

For more advanced configuration (models or context typing), please refer to the [plugin documentation](/plugins/typescript-resolvers).
